@import '~@common/css/_variables.scss';

.singTag {
  display: flex;
  font-size: 12px;

  .title {
    margin: 8px 6px 0;
    line-height: 20px;
    color: #373737;
    white-space: nowrap;
  }

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      position: relative;
      margin-top: 8px;
      line-height: 20px;
      color: #676767;
      text-align: center;
      cursor: pointer;
      border-radius: 15px;

      &:hover {
        color: #373737;
      }

      &:nth-child(1) {
        width: 44px !important;
      }

      &:not(:last-child) {
        margin-right: 20px;

        &::after {
          position: absolute;
          top: 50%;
          right: -10px;
          width: 2px;
          height: 10px;
          background-color: #f2f2f2;
          content: '';
          transform: translateY(-50%);
        }
      }

      &.active {
        color: $color;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: $color;
          border-radius: 15px;
          content: '';
          opacity: 0.08;
        }
      }
    }
  }
}
